import { Component, Vue } from 'vue-property-decorator'

<template>
  <view class="p-20rpx">
    <view v-if="list.length">
      <view
        v-for="i in list"
        :key="i._id"
        style="transition: 300ms"
        :class="
          (expandIds.includes(i._id) ? 'h-350rpx' : 'h-78rpx') +
          ' p-20rpx overflow-hidden mb-20rpx bg-white rounded-10rpx'
        "
        @click="handleExpand(i._id)"
      >
        <view class="flex justify-between items-center">
          <text class="text-first text-base">{{ i.realName }}</text>
          <view class="text-first text-base flex items-center">
            {{ i.createTime }}
            <u-icon
              :name="expandIds.includes(i._id) ? 'arrow-up' : 'arrow-down'"
              color="#666"
              size="12"
            ></u-icon>
          </view>
        </view>
        <view class="text-first text-base py-10rpx">
          <view>
            <text>手机号：</text>
            {{ i.phoneNumber }}
          </view>
        </view>
        <view class="text-first text-base py-10rpx">
          <text>所属部门：</text>
          {{ i.deptName }}
        </view>
        <view class="text-first text-base py-10rpx">
          <text>性别：</text>
          {{ i.sex }}
        </view>
        <view class="flex justify-end mt-20rpx">
          <view @click.stop="handle2Stop(i)">
            <u-button
              :type="i.state == 1 ? 'warning' : 'primary'"
              size="small"
              :text="i.state == 1 ? '停用' : '启用'"
            />
          </view>
          <view class="w-20rpx"></view>
          <view @click.stop="handle2Withdraw(i)">
            <u-button type="error" size="small" text="注销" />
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="暂无数据"
    />
  </view>
</template>
<script lang="ts">
import { filter, findIndex } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import { showModal } from '@/utils'

@Component({ name: 'UserManage' })
export default class UserManage extends Vue {
  list: Recordable = []
  db: any = {}
  async onLoad() {
    this.db = wx.cloud.database()
    this.getData()
  }
  async getData() {
    const { data } = await this.db.collection('user').get()
    this.list = filter(data, (i) => i.phoneNumber !== '18397871804')
  }
  expandIds: Array<any> = []
  handleExpand(id: string) {
    const index = findIndex(this.expandIds, (i) => i === id)
    if (index >= 0) {
      this.expandIds.splice(+index, 1)
      return
    }
    this.expandIds.push(id)
  }
  async handle2Stop({ _id, state }: any) {
    await this.db
      .collection('user')
      .where({ _id })
      .update({
        data: {
          state: +state === 1 ? 0 : 1
        }
      })
    this.getData()
  }
  async handle2Withdraw({ _id }: any) {
    const { confirm } = await showModal({ content: '确定注销吗？' })
    confirm && (await this.db.collection('user').where({ _id }).remove())
    this.getData()
  }
}
</script>
